<template>
  <!-- 课程详情页面组件 -->
  <div class="course-info">
    <!-- 导航栏 -->
    <van-nav-bar title="课程详情" left-arrow @click-left="onClickLeft" />

    <!-- 详情信息展示区域 -->
    <van-cell-group>
      <!-- 头部课程图片 -->
      <van-cell class="course-image">
        <img :src="courseInfoData.courseImgUrl" />
      </van-cell>

      <!-- 课程描述 -->
      <van-cell class="course-description">
        <!-- 课程名称 -->
        <h2 v-text="courseInfoData.courseName"></h2>
        <!-- 课程概述 -->
        <p v-text="courseInfoData.previewFirstField"></p>
        <!-- 课程销售信息 -->
        <div class="course-sale-info">
          <!-- 课程价格 -->
          <div class="course-price">
            <!-- 折扣价格 -->
            <span class="discounts">￥{{ courseInfoData.discounts }}</span>
            <!-- 原价 -->
            <del class="price">￥{{ courseInfoData.price }}</del>
          </div>

          <!-- 右侧购买信息 -->
          <div class="tag">
            <!-- 购买人数 -->
            <span class="info">{{ courseInfoData.sales }}人已购</span>
            <!-- 更新时间 -->
            <span class="info">每周三、五更新</span>
          </div>
        </div>
      </van-cell>

      <!-- 课程详细内容 -->
      <van-cell class="course-detail" :style="styleOptions">
        <!-- tab 标签页组件 -->
        <van-tabs v-model="active" sticky scrollspy>
          <!-- 详情页 -->
          <van-tab title="详情">
            <!-- 课程详情信息在后台是通过富文本编辑器设置的，所以这里的内容都是 html 文本的形式 -->
            <div v-html="courseInfoData.courseDescription"></div>
          </van-tab>

          <!-- 内容页 -->
          <van-tab title="内容">
            <section-and-lesson v-for="item in sectionAndLessonData" :key="item.id" :section-data="item">
            </section-and-lesson>
          </van-tab>
        </van-tabs>
      </van-cell>

      <!-- 底部支付功能 -->
      <van-tabbar class="bottom" v-if="!courseInfoData.isBuy">
        <!-- 左侧价格区域 -->
        <div class="price">
          <!-- 限时秒杀 -->
          <span v-text="courseInfoData.discountsTag"></span>
          <!-- 折扣价 -->
          <span class="discounts">￥{{ courseInfoData.discounts }}</span>
          <!-- 原价 -->
          <del class="origin-price">￥{{ courseInfoData.price }}</del>
        </div>

        <!-- 右侧购买按钮 -->
        <van-button type="primary" @click="handlePay">立即购买</van-button>
      </van-tabbar>
    </van-cell-group>
  </div>
</template>

<script>
// 导入接口
// 1、getCourseById：获取课程详情接口
// 2、getSectionAndLesson：获取课程章节接口
import { getCourseById, getSectionAndLesson } from '@/services/course'

// 导入 vant 组件
import { NavBar, CellGroup, Cell, Tabs, Tab, Tabbar, Button } from 'vant'

// 导入组件
// 导入课程章节详情组件
import SectionAndLesson from './components/SectionAndLesson.vue'

export default {
  name: 'CourseInfo',
  props: {
    // 课程 ID
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  components: {
    VanNavBar: NavBar,
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanTabs: Tabs,
    VanTab: Tab,
    VanTabbar: Tabbar,
    VanButton: Button,
    SectionAndLesson // 课程章节详情组件
  },
  data () {
    return {
      courseInfoData: {}, // 用户详情数据
      sectionAndLessonData: {}, // 课程章节详情数据
      active: 0, // tab 标签页组件活跃的项的下标
      styleOptions: {} // 动态绑定的样式信息
    }
  },
  created () {
    // 调用请求课程详情函数
    this.loadCourseInfo()
    // 调用请求章节详情函数
    this.loadSectionAndLesson()
  },
  methods: {
    // 点击返回按钮触发的事件
    onClickLeft () {
      this.$router.go(-1) // 跳转到登陆之前的页面
    },
    // 请求课程详情
    async loadCourseInfo () {
      // 发送获取课程详情请求
      const { data } = await getCourseById({
        courseId: this.courseId
      })
      // 如果请求成功
      if (data.state === 1) {
        this.courseInfoData = data.content

        // 如果是已购课程
        if (data.content.isBuy) {
          this.styleOptions.padding = 0
        }
      }
    },
    // 请求章节详情
    async loadSectionAndLesson () {
      // 发送课程章节详情请求
      const { data } = await getSectionAndLesson({
        courseId: this.courseId
      })
      // 如果请求成功
      if (data.state === 1) {
        this.sectionAndLessonData = data.content.courseSectionList
      }
    },
    // 点击支付按钮触发的事件
    handlePay () {
      // 是否登录
      if (this.$store.state.user) {
        // 跳转支付页面
        this.$router.push({
          name: 'Pay',
          params: {
            courseId: this.courseId
          }
        })
      } else {
        // 没有登陆就跳转到登录页面
        this.$router.push({
          name: 'Login',
          query: {
            // 将当前页面路径存储，到时候登录后就跳转到该页面
            redirect: this.$route.fullPath
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 页面整体样式
.course-info {
  // 页面 cell 组件的样式
  .van-cell {
    padding: 0;
  }

  // 头部图片样式
  .course-image {
    width: 100%;
    height: 260px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 课程描述区域样式
  .course-description {
    height: 150px;
    padding: 0 15px;

    // 课程销售区域样式
    .course-sale-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    // 课程价格
    .course-price {
      display: flex;
      justify-content: space-between;
      width: 25%;

      // 折扣价格
      .discounts {
        font-size: 24px;
        font-weight: 700;
        color: #ff7452;
      }
    }

    // 右侧购买信息
    .tag {
      display: flex;
      justify-content: space-between;
      width: 57%;
      font-weight: 700;
      text-align: center;
      color: #666;

      .info {
        padding: 0 5px;
        border-radius: 3px;
        background-color: #f3f3f5;
      }
    }
  }

  // 课程详情
  .course-detail {
    padding: 0 0 50px;
  }

  // 底部区域
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 50px;
    padding: 0 15px;

    // 左侧价格
    .price {
      font-size: 18px;

      // 折扣价格
      .discounts {
        font-size: 24px;
        font-weight: 700;
        color: #ff7452;
      }

      // 原价
      .origin-price {
        font-size: 16px;
        color: #aaa;
      }
    }

    // 右侧按钮
    .van-button {
      width: 40%;
      height: 80%;
    }
  }
}
</style>
